<template>
  <view id="testCom">
    <view class="choose-address-title">
      请选择所在地区
    </view>
    <view class="steps_box">
			<view class="steps_box_inner">
				<view class="area_box" v-for="(item, index) in datalist" :key="index"
					v-if="!(item == '请选择市' && datalist[index - 1] == '请选择省' || item == '请选择区' && datalist[index - 1] == '请选择市' || item == '请选择街道' && datalist[index - 1] == '请选择区')">
					<view class="icon_idx">
						<image v-if="addressindex == index" :src="imgSrc" style="width:100%; height: 100%;"></image>
					</view>
					<view class="area_select"
						:class="[showIndex > index && !(item == '请选择市' && datalist[index - 1] == '请选择省' || item == '请选择区' && datalist[index - 1] == '请选择市' || item == '请选择街道' && datalist[index - 1] == '请选择区') ? 'steps_list steps_list_acitve' : 'steps_list ',showIndex == 3 && item !== '请选择街道' || datalist.length == 3 && showIndex == 2 && item !== '请选择区' ? 'only-circular':'']">
						<view :class="addressindex == index ? 'red-title' : 'wheit-title'" class="steps-text"
							@click="check_site(index)">
							{{ item == '请选择省' || item == '请选择市' || item == '请选择区' || item == '请选择街道' ? item : item.areaName }}
						</view>
						<!-- <view @click="check_site(index)" class="macallan-icon mcl-youjiantou"></view> -->
						<view @click="check_site(index)" class="mcl-youjiantou">
							<image style="width:100%;height:100%;" src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/arrow_right.png"></image>
						</view>
					</view>
				</view>
			</view>
    </view>
    <view class="btm-btn" :style="{bottom:isIos?'64rpx':'0' }">
      <view class="btn_">
        <view class="cancel" @click="clickCancel">
          取消
        </view>
        <view class="enter" @click="closeMask">
          确定
        </view>
      </view>
    </view>
    <view class="ios_safe_zone_line" style="z-index: 2;" v-if="isIos"></view>
  </view>
</template>

<script>
  export default {
    name: 'stepsList',
    data() {
      return {
        imgSrc: 'https://100000063-1252208446.file.myqcloud.com/images/地址管理_icon.png'
      };
    },
    props: {
      datalist: {},
      addressindex: {},
      showIndex: {},
      isIos: false
    },
    methods: {
      check_site(n) {
        this.$emit('click', n);
      },
      closeMask(n) {
        this.$emit('closeMask', n);
      },
      clickCancel() {
        this.$emit('clickCancel');
      }
    }
  };
</script>

<style lang="less">
  .icon_idx {
    width: 32rpx;
    height: 32rpx;
    margin-right: 16rpx;
  }

  .area_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 48rpx;
  }

  .area_select {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .steps_box {
    // margin-bottom: 19rpx;
    box-sizing: border-box;
    position: relative;
    padding: 0 48rpx;
		.steps_box_inner{
			border-bottom: 1px solid #F2F2F2;
		}

    .line {
      border-bottom: 2rpx solid #eee;
      width: 100%;
      height: 2rpx;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }

  .steps_list {
    // position: relative;
    // padding: 0 0 0 40rpx;
    // box-sizing: border-box;
    // border-left: 4rpx solid transparent !important;
    // height: 80rpx;
  }

  .steps_list:last-of-type {}

  .steps_list_acitve {
    // border-left: 4rpx solid #862633 !important;
    // height: 80rpx;
  }

  .steps_list_acitve :after {
    // background: #862633 !important;
  }

  .steps_list :after {
    // content: '';
    // display: block;
    // position: absolute;
    // transform: translateX(-12rpx);
    // top: 30rpx;
    // left: -36rpx;
    // width: 12rpx;
    // height: 12rpx;
    // line-height: 44rpx;
    // text-align: center;
    // background: #862633;
    // color: #862633;
    // border: 4rpx solid #862633;
    // font-size: 12rpx;
    // border-radius: 50%;
    // box-sizing: border-box;
  }

  .steps_list:last-of-type :after {
    background: #fff;
  }

  .steps_list.only-circular:last-of-type :after {
    background: #862633 !important;
  }

  b .steps-text {
    font-size: 28rpx;
    line-height: 32rpx;
    font-family: NotoSansSC-Regular;
  }
	.steps-text {
	  font-size: 28rpx;
	  line-height: 32rpx;
	  font-family: NotoSansSC-Regular;
	}

  .choose-address-title {
    padding: 80rpx 0 56rpx 48rpx;
    font-size: 32rpx;
    color: #000;
    font-weight: 500;
    text-align: start;
    position: relative;
		font-family: NotoSansSC-Medium;
		line-height: 48rpx;
  }

  .choose-close {
    position: absolute;
    right: 0rpx;
    padding: 30rpx;

    &.mcl-icon_close {
      font-size: 22rpx;
      color: #979797;
      top: 24rpx;
    }
  }

  .mcl-youjiantou {
    font-size: 0;
    // position: absolute;
    // right: -34rpx;
    // top: -36rpx;
    // padding: 20rpx;
    // color: #979797;
		width: 32rpx;
		height: 32rpx;

    &:after {
      display: none;
    }
  }

  .steps_box .steps_list_acitve:nth-child(1) {
    border-right: #030303;
  }

  .red-title {
    color: #000000;
  }

  .wheit-title {
    color: #757575;
  }

  .left-circle {
    position: absolute;
    left: 0rpx;
    top: 0;
    transform: translate(-50%, -50%);
    width: 40rpx;
    height: 40rpx;
    background-color: green;
  }

  .btm-btn {
    position: absolute;
    left: 0;
    bottom: 64rpx;
    width: 100%;
    height: 228rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    z-index: 1;

    .btn_ {
      width: 596rpx;
      justify-content: space-between;
      display: flex;
    }
  }

  .cancel,
  .enter {
    width: 282rpx;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    font-weight: 500;
    font-family: NotoSansSC-Medium;
    border-radius: 8rpx;
  }

  .cancel {
    background: #F2F2F2;
    color: #3B8749;
  }

  .enter {
    background: #3B8749;
    color: #FFFFFF;
  }
</style>